import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { placeholderParagraphDefaultProps } from './defaultProps';
import type { PlaceholderParagraphOptions } from './type';

export interface PlaceholderParagraphProps extends PlaceholderParagraphOptions, HTMLAttributes<HTMLDivElement> {}

const PlaceholderParagraph: FC<PlaceholderParagraphProps> = (props) => {
  const { className, children, forwardedRef, ...placeholderParagraphProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('paragraph', className), ...placeholderParagraphProps },
    children,
  );
};

PlaceholderParagraph.displayName = 'PlaceholderParagraph';
PlaceholderParagraph.defaultProps = placeholderParagraphDefaultProps;

export default PlaceholderParagraph;
